<template>
  <div class="foldingBox">
    <div class="foldingBox__header" @click="handleSlideToggle">
      <slot name="header"></slot>

      <span
        v-if="showIcon"
        class="foldingBox__header__icon"
        :class="{ 'foldingBox__header--open': !localIsSlideUp }"
      >
        <i class="el-icon-arrow-down"></i>
      </span>
    </div>

    <div class="foldingBox__body" ref="body" :style="bodyStyle">
      <slot name="body"></slot>
    </div>
  </div>
</template>

<script>
import '../../../styles/animation-folding.less'
import methods from './methods'

export default {
  name: 'CimAnimationFolding',
  mixins: [methods],
  props: {
    // 显示箭头图标
    showIcon: {
      type: Boolean,
      default: true
    },
    // 初始时是否折叠
    isSlideUp: {
      type: Boolean,
      default: true
    },
    // 动画类型
    animationType: {
      type: String,
      default: 'bothway',
      validator: function (value) {
        return ['none', 'bothway', 'single'].includes(value)
      }
    }
  },
  data () {
    return {
      localIsSlideUp: this.isSlideUp,
      bodyStyle: {
        height: this.isSlideUp ? '0' : 'auto'
      }
    }
  },
  watch: {
    isSlideUp (val) {
      this.localIsSlideUp = val
    },
    localIsSlideUp (val) {
      this.performAnimation(val)
    }
  }
}
</script>
